<template>
  <div style="width: 100%;height: 800px;background-color: rgba(217,217,134,0.13)">
  <div  style="width:1200px;height:800px;margin: 0 auto;background-color:white" >

      <div style="height: 630px;margin-top: 50px">
        <div style="width: 700px;float: left;margin-top:70px;">
          <img src="http://qaqo1a96h.bkt.clouddn.com/index.gif"/>
        </div>
        <div style="width: 400px;float: right;margin-top: 30px;margin-right: 100px;">
          <h2>账号登录</h2>
          <el-form :model="user" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="账号" prop="email">
              <el-input type="email" v-model="user.email" autocomplete="off" placeholder="请输入邮箱账号"></el-input>
            </el-form-item>
            <el-form-item label="密码 " prop="password">
              <el-input type="password" v-model.number="user.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <div  style="width: 400px;height: 62px;">
              <div style="width: 200px;height: 50px;position: absolute">
                <el-form-item style="width: 230px" label="验证码" prop="code">
                  <el-input type="text" v-model.number="user.code" placeholder="验证码"></el-input>
                </el-form-item>
              </div>
              <div style="width: 200px;height: 50px;margin-left: 245px">
                <el-button type="primary" plain @click="getcode()">发送验证码</el-button>
              </div>
            </div>
            <el-form-item>
              <el-button type="primary" @click="submitForm(user)">登录</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
  </div>
  </div>
</template>

<script>

  import axios from 'axios';

    export default {
      name: "login",
      data() {
        return {
          user: {
            email: '',
            password: '',
            code: ''
          },
        }
      },
      methods: {
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },
        submitForm:function (user) {
          var _this=this;
          axios.post("/api/user/login/"+_this.user.email+"/"+_this.user.password+"/"+_this.user.code).then(function (res) {
              if(res.data=="success"){
                _this.$router.push('/menuindex')
              }
          })
        },
        getcode:function () {
          var _this=this;
          axios.get("/api/user/getcode/"+_this.user.email).then(function (res) {
            _this.$notify({
              title: '成功',
              message: '验证码发送成功',
              type: 'success'
            });
          })
        },
      }
    }
</script>

<style scoped>

</style>
